1-3 閬：GぁX

另一種啟動 JavaScript 的方法，則是靠事件驅動，換言之，當瀏覽器讀入網頁後，即載入 JavaScript 程式碼，但必須等到使用者點選連結或啟動其他滑鼠事件，才能觸發 JavaScript 的執行。為方便和使用者進行互動，JavaScript 提供了三個內建的對話視窗： 本節將利用此三種內建的對話視窗來說明 JavaScript 如何以「事件驅動」的方式來執行。

Hint
所謂「滑鼠事件」（Mouse events），指的是能由瀏覽器偵測到的滑鼠動作，例如點選某一個連結、將游標移到一的影像上、游標的移動等。

舉例來說，我們也可以將 JavaScript 直接寫入網頁的連結（Links）之中，因此當使用者點選此連結，瀏覽器則執行相關的 JavaScript 程式。例如，我們可以定義某個特殊連結如下：

Example（alert01.htm）：

當你按下上述連結，就會出現一個罵人的警告視窗，外觀如下：

你只能按「確定」按鈕以關閉此警告視窗。原網頁程式碼如下：

原始檔（alert01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>罵人的警告視窗</h2>
<hr>

<A href="javascript:alert('!@#$%^&amp;*!')">按了你會後悔喔！</A> 

<hr>
</body>
</html>

在上述範例中，我們是把 JavaScript 的程式碼直接寫在 href 的連結位置，直接呼叫 alert() 函數來產生警告視窗並顯示罵人訊息。這個範例顯示幾個重點：

我們也可以先執行一些簡單的運算，再將結果呈現在警告視窗，例如：

Example（alert02.htm）：

上述範例的原始檔如下：

原始檔（alert02.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>顯示網頁載入時間的警告視窗</h2>
<hr>

<script>
today = new Date();			// 產生日期物件
hour = today.getHours();		// 取得時數
minute = today.getMinutes();		// 取得分數
second = today.getSeconds();		// 取得秒數
string = "網頁載入時間是"+hour+"點"+minute+"分"+second+"秒";	// 連接字串
</script>
<a href="javascript:alert(string)">網頁載入時間</a>

<hr>
</body>
</html>

在上例中，我們先產生字串 string，當連結被按下去時，再將字串送至警告視窗。（有關於日期物件和各種時間的用法，會在後面詳述。）

若要執行的程式碼太多，不方便放至連結之中，或是同一段程式碼要反覆使用，此時我們就可以定義另外一個函數，並在連結中執行此函數，例如：

Example（alert03.htm）：

上述範例的原始檔如下：

原始檔（alert03.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>囉里叭唆的警告視窗</h2>
<hr>

<SCRIPT>
function talk() {
	alert("不是叫你不要按嗎？");
	alert("為什麼你又按了呢？");
	alert('如果每個小孩都像你一樣不聽話，');
	alert('那麼所有大人不就都抓狂了？！');
	alert('為了懲罰你，你必須再按20次 Enter 鍵！');
	for (i=0; i<20; i++)
		alert('第 ' + (i+1) + ' 次！');
	alert('以後要當乖小孩了！');
}
</SCRIPT>
<A href="javascript:talk()">這一次你真的會後悔！</A> 

<hr>
</body>
</html>

請注意在上例中，字串的並排是由「+」來達成，而數學的加法也是由「+」來達成，JavaScript 遇到「+」時，會先判斷左右兩個運算子是否全是數值，若是，則進行加法。若有一個運算子是字串，則執行字串的並排運算。（當然，在執行並排運算時，會將數值形態的運算元先轉換成字串。）

此外，由上述範例可以看出，JavaScript 可以用雙引號（"）或單引號（'）來定義字串的開始和結束。

在上述範例中，若改用無窮迴圈，那麼，使用者可能會真的很後悔按下此連結，因為唯一跳出的方法，就是以非常手段停止瀏覽器的執行。（在Windows平台可同時按 Ctrl、Alt、Del 三鍵來開啟工作管理員，以關閉瀏覽器。）例如：

Example（alert05.htm）：

不信邪的同學，可以直接點選上述網頁的連結。上述範例的原始檔如下：

原始檔（alert05.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>沒完沒了的警告視窗</h2>
<hr>

<script>
function talk() {
	alert('你要按一千次才能脫身...');
	for (i=0; i<1000; i++)
		alert('第 ' + (i+1) + ' 次！');
	alert('哈哈！你被我騙了...你還要按100次才能走人...');
	for (i=0; i<100; i++)
		alert('第 ' + (i+1) + ' 次！');
	alert('你真的按完了耶，太崇拜了！（不過你時間也太多了吧？^_^）');
}
</script>
<a href="javascript:talk()">有膽你就給我按看看！</a>

<hr>
</body>
</html>

由上述程式碼可以看出，我們可以定義一個簡單的函式 talk()，然後使用 "javascript:talk()" 直接呼叫此函式。

Hint
如果要快速跳出，請勿壓著Enter鍵，改以ESC鍵壓著，否則程式有可能會再執行一次。

警告視窗的功能只是在警告或是傳達訊息，使用者也只能按「確定」否則無法繼續。另一個具有「二選一」功能的內建視窗，是確認視窗，範例如下：

Example（confirm01.htm）：

在上述範例中，若使用者按下「清大首頁」的連結後，會產生下列確認視窗：

此時若按下「確定」按鈕，網頁會連到清華大學首頁。若按下「取消」按鈕，則網頁維持不變。此範例的原始檔如下：

原始檔（confirm01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用確認視窗來確認連結動作</h2>
<hr>

<script>
function link2nthu() {
	answer = confirm("你確定要連到清大的首頁嗎？");
	if (answer)
		location.href="http://www.nthu.edu.tw";
}
</script>

<!-- 第一種方法：以函數來完成此項工作 -->
<a href="javascript:link2nthu()">清大首頁</a><br>

<!-- 第二種方法：將程式碼寫在連結內。若回傳值為真，則連至新位置 -->
<a href="javascript:if (confirm('你確定要連到交大的首頁嗎？')) location.href='http://www.nctu.edu.tw'">交大首頁</a><br>

<!-- 第三種方法：使用 onClick 來完成此項工作。若 onClick 的值為偽，則連結無作用 -->
<a href="http://www.ntu.edu.tw" onClick="return(confirm('你確定要連到台大的首頁嗎？'))">台大首頁</a>

<hr>
</body>
</html>

在上述範例中，我們使用了三種不同的方法來將確認視窗用於連結之中：

Hint
除了在用在上述範例之外，一般而言 onClick 可以觸發點擊事件，繼而執行 onClick 屬性字串中的程式碼。

提示視窗可以讓使用者輸入一列字串（所以又稱為輸入視窗），也是取得使用者輸入的最簡單方式。下面是提示視窗的範例：

Example（prompt01.htm）：

當使用者按下「張老師的課程」時，會產生如下的提示視窗：

使用者可以輸入相關的課程代碼，按「確定」後，網頁就會連結到相關課程首頁。此範例的原始檔如下：

原始檔（prompt01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用輸入視窗來決定連結網址</h2>
<hr>

<script>
function link2course() {
	course = prompt("請輸入課程代碼：(webProgramming, scientificComputing, MSAR)", "webProgramming");
	if ((course=="webProgramming")||(course=="scientificComputing")||(course=="MSAR"))
		location.href="http://mirlab.org/jang/courses/" + course;
}
</script>

<a href="javascript:link2course()">張老師的課程</a>

<hr>
</body>
</html>

在上述範例中，我們使用 if 敘述來判斷使用者輸入的字串是否等於 "cs3431" 或 "cs3331" 或 "cs3334" 或 "cs5652" 或 "isa5571"，若不是，則不發生任何事。若是，則造出相關網址，並將網頁連結到此網址。（"||" 代表邏輯運算的「或」，而 "&&" 則代表邏輯運算的「且」，這部分會在後面章節詳述。）

Hint
事實上，alert()、confirm() 和 prompt() 都是 window 物件的方法，所以要呼叫這些方法，完整的寫法應該是 window.alert()、window.confirm() 和 window.prompt()，但是因為他們太常被用到，所以也可以省略 window 此物件，直接呼叫這些函數。

「事件驅動」的執行方式，是 JavaScript 在網頁中最常被使用的方式。下一節將介紹與表單相關的「事件驅動」執行方式。

JavaScript 程式設計與應用：用於網頁用戶端